<template>
    <div class="w1200 hospital_detail_page">
        <!-- 面包屑 开始 -->
        <div class="breadcrumb">
            <el-breadcrumb class="el_breadcrumb" separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{ $cookies.get('city') }}</el-breadcrumb-item>
                <el-breadcrumb-item>{{ $cookies.get('city') }}医生</el-breadcrumb-item>
                <el-breadcrumb-item>{{ oInfo.name }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 面包屑 end -->

        <!-- 基础信息 开始 -->
        <div class="base_info">

            <!-- 医生头像 开始 -->
            <div class="doctor_avatar">
                <li-image :src="oInfo.photo" class="img" v-if="oInfo.photo" />
                <img src="@/assets/images/doctor/doctor_avatar.jpg" class="img" alt="" v-else>
            </div>
            <!-- 医生头像 end -->

            <!-- 文字信息 开始 -->
            <div class="text_info">
                <div class="top">

                    <!-- 标题 开始 -->
                    <div class="title">
                        <div class="name">
                            <span>{{ oInfo.name }}</span>
                            <img src="@/assets/images/rz.png" class="rz" alt="" v-if="oInfo.hasCertified == 1">
                        </div>
                        <div class="attention" :class="oInfo.followedStatus == 1 ? 'attentioned' : ''" @click="attention">
                            <img src="@/assets/images/focus.png" class="img" alt="关注" v-if="oInfo.followedStatus == 2">
                            <span>{{ oInfo.followedStatus == 2 ? '关注' : '已关注' }}</span>
                        </div>
                    </div>
                    <!-- 标题 end -->
                    <!-- 标签、评分、评价 开始 -->
                    <div class="label_score">
                        <div class="score_box">
                            <div class="score">
                                <!-- <el-rate v-model="oInfo.initScore" class="li_rate" disabled allow-half></el-rate> -->
                                <li-rate v-model="oInfo.initScore" disabled></li-rate>
                            </div>
                            <div class="review">{{ commentsList.length }}条评价</div>
                        </div>
                    </div>
                    <!-- 标签、评分、评价 end -->

                    <!-- 预约、点评、医生人数 开始 -->
                    <div class="person_box">
                        <img src="@/assets/images/smile.png" class="img" alt="">
                        <span class="num">{{ totalScore.scoreOverall }}</span>
                        <span class="line">/</span>
                        <span>从业年限</span>
                        <span class="num">{{ oInfo.workYears }}</span>
                        <span class="line">/</span>
                        <span>预约人数</span>
                        <span class="num">{{ oInfo.initAppointmentCnt }}</span>
                        <span class="line">/</span>
                        <span>点评人数</span>
                        <span class="num">{{ commentsList.length }}</span>
                    </div>
                    <!-- 预约、点评、医生人数 end -->

                    <!-- 专业擅长 开始 -->
                    <div class="skill_box">
                        <img src="@/assets/images/doctor/skill.png" class="img" alt="">
                        <span>{{ oInfo.expertProjectNames }}</span>
                    </div>
                    <!-- 专业擅长 end -->


                    <!-- 更多信息 开始 -->
                    <div class="more_info">
                        <div class="cell">
                            <span class="name">营业时间</span>
                            <div class="txt" :title="oInfo.businessTime">{{ oInfo.businessTime }}</div>
                        </div>
                        <div class="cell">
                            <span class="name">所在位置</span>
                            <div class="txt">{{ oInfo.provinceName }}{{ oInfo.cityName }}{{ oInfo.districtName }}{{
                                oInfo.address }}</div>
                        </div>
                    </div>
                    <!-- 更多信息 end -->



                </div>

                <div class="btn_box">
                    <el-button type="primary" class="btn" @click="goBook">免费预约</el-button>
                </div>

            </div>
            <!-- 文字信息 end -->

        </div>
        <!-- 基础信息 end -->

        <!-- 内容 开始 -->
        <div class="content">

            <!-- 左侧内容 开始 -->
            <div class="left_box">

                <!-- 医生介绍 开始 -->
                <div class="activity_box">

                    <TabMenus :list="tabbarList" @change="onTabbarChange" />

                    <div class="row_box" ref="tabbar_0">
                        <div class="row_head">医生介绍</div>
                        <div class="row_content">

                            <div class="outpatientIntroduce" v-html="oInfo.introduce"></div>

                        </div>
                    </div>

                </div>
                <!-- 医生介绍 end -->

                <!-- 用户案例 开始 -->
                <div class="row_box" ref="tabbar_1">
                    <div class="row_head">
                        <span>用户案例</span>
                        <!-- <nuxt-link to="/doctor" class="more">
                            <span>更多</span>
                            <i class="el-icon-arrow-right"></i>
                        </nuxt-link> -->
                    </div>
                    <div class="row_content">
                        <div class="case_list">
                            <UserCase :key="`case_${index}`" v-for="(item, index) in caseList" :info="item" />
                        </div>
                    </div>
                </div>
                <!-- 用户案例 end -->

                <!-- 用户评论 开始 -->
                <div class="row_box" ref="tabbar_2">
                    <div class="row_head">
                        <span>用户评论</span>
                    </div>
                    <div class="row_content">
                        <UserScore :info="totalScore" :total="commentsList.length" />
                        <div class="comment_list">
                            <Comment v-for="(item, index) in commentsList" :key="`comment_${index}`" :info="item" />
                        </div>
                    </div>
                </div>
                <!-- 用户评论 end -->


            </div>
            <!-- 左侧内容 end -->

            <!-- 右侧内容 开始 -->
            <div class="right_box">

                <!-- 人气商品 开始 -->
                <div class="problem_box">
                    <div class="head">人气商品</div>
                    <div class="list_box goods_list">
                        <Goods v-for="(item, index) in goodsList" :key="index" :info="item"></Goods>
                    </div>
                </div>
                <!-- 人气商品 end -->

            </div>
            <!-- 右侧内容 end -->
        </div>
        <!-- 内容 end -->


    </div>
</template>
<script>
import { Rate } from 'element-ui';
import TabMenus from '@/components/tabbar/index.vue'
import DetailGoods from '@/components/goods/detail.vue'
import Comment from '@/components/comment/index.vue'
import UserScore from '@/components/comment/score.vue'
import UserCase from '@/components/case/index.vue'
import Goods from '@/components/goods/index.vue';
import {
    GET_DOCTOR_INFO,
    FOLLOWED_DOCTOR_INFO,
    GET_DOCTOR_USERCOMMENTS,
    GET_DOCTOR_USERCASES,
    GET_GOODS_SEARCH
} from "@/http/interface";
export default {
    components: {
        [Rate.name]: Rate,
        TabMenus,
        DetailGoods,
        Comment,
        UserScore,
        UserCase,
        Goods
    },
    data() {
        return {
            tabbarList: [
                { name: '医生介绍', id: 0 },
                { name: '用户案例', id: 1 },
                { name: '用户评论', id: 2 },
            ],
            doctorId: "",
            oInfo: {},
            title: "",
            description: "",
            keywords: "",
            //questionList: [],
            //doctorList: [],
            commentsList: [],
            goodsList: [],
            totalScore: {},
            caseList: []
        }
    },
    head() {
        return {
            title: this.title,
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.description,
                },
                {
                    hid: "Keywords",
                    name: "Keywords",
                    content: this.keywords,
                },
            ],
        };
    },
    async asyncData({ query, $axios }) {

        let params = { id: query.id };
        let res = await $axios.get(GET_DOCTOR_INFO, {
            params: params,
        });
        let oInfo = res.data || {};

        // 社区问答
        // let qes = await $axios.get(GET_QUESTIONANSWER_SEARCH, { params: { pageNumber: 1, pageSize: 10 } })
        // let qbj = qes.data || {}
        // let questionList = qbj.list || []

        // 医生团队
        // let des = await $axios.get(GET_HOSPITAL_DOCTORS, { params: params });
        // let doctorList = des.data || [];

        // 用户评价
        let comes = await $axios.get(GET_DOCTOR_USERCOMMENTS, { params, params });
        let obj = comes.data || {};
        let commentsList = obj.list || [];
        let totalScore = obj.summary || {};

        // 案例
        let ces = await $axios.get(GET_DOCTOR_USERCASES, { params: params });
        let caseList = ces.data || [];

        // 获取商品
        let ges = await $axios.get(GET_GOODS_SEARCH, { params: { pageNumber: 1, pageSize: 5 } })
        let gobj = ges.data || {}
        let goodsList = gobj.list || []


        return {
            oInfo,
            doctorId: query.id,
            // appointment,
            // hospital,
            // surroundings,
            title: oInfo.seoTitle,
            keywords: oInfo.seoKeywords,
            description: oInfo.seoDescription,
            //questionList,
            goodsList,
            //doctorList,
            caseList,
            commentsList,
            totalScore,
        };
    },
    mounted() {
    },
    methods: {

        // 监听菜单点击
        onTabbarChange(e) {
            let _dom = this.$refs['tabbar_' + e];
            if (_dom) {
                _dom.scrollIntoView();
            }
        },

        // 关注
        async attention() {
            let token = this.$cookies.get("token");
            if (!token) {
                this.$router.push({
                    path: "/login",
                });
                return false;
            }
            let _status = this.oInfo.followedStatus;
            let id = this.doctorId;
            let params = { id: id };
            let res = await this.$axios.get(FOLLOWED_DOCTOR_INFO, { params: params });
            if (res.code == 200) {
                this.$set(this.oInfo, "followedStatus", _status == 1 ? 2 : 1);
            }
        },

        // 去预约
        goBook() {
            let params = {};
            params.id = this.doctorId;
            params.source = "doctor";
            params.hospitalId = this.oInfo.hospitalId
            this.$routerPush("/appoint", params);
        },
    }
}
</script>
<style lang="less" scoped>
@import '/assets/styles/index/doctor/detail.less';
</style>